<template>
	<view class="glistbox">
		<view class="clearfloat">
			<view class="gameitem" v-for="(item , i) in list">
				<image class="gpic" :src="item.image" mode="widthFix"></image>
				<image :src="'/static/c'+item.is_collection+'.png'" class="cpic" mode="widthFix"></image>
			</view>
		</view>
		<view class="gltxt">
			{{$t("gamelist.txt1")}} {{list.length}} {{$t("gamelist.txt2")}} {{total}} {{$t("gamelist.txt3")}}
		</view>
		<view class="gltxt bj_center">
			<text>{{$t("gamelist.txt4")}}</text>
			<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
				<!-- 上箭头 -->
				<path d="M7 10L12 15L17 10" />
				<!-- 下箭头 -->
				<path d="M7 15L12 20L17 15" />
			</svg>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app"


	const props = defineProps({
		obj: {
			type: Object,
			required: false, // 是否必传
			default: {}
		},
		id: {
			type: String,
			default: ""
		}
	});

	let list = ref([])
	let total = ref(0)
	let pageNum = ref(1)
	let pageSize = ref(0)
	let mp = ref(1)
	let id = ref()

	onLoad(function() {
		list.value = props.obj.game_list
		id.value = props.id
		total.value = props.obj.total
		pageSize.value = getApp().globalData.pageSize

		// 计算出共几页
		mp.value = total.value % pageSize.value == 0 ?
			total.value / pageSize.value :
			parseInt(total.value / pageSize.value) + 1

	})
</script>

<style scoped lang="scss">
	.glistbox {

		.gameitem {
			position: relative;
			width: 33%;
			float: left;
			padding-right: 3%;
			margin-bottom: 20rpx;

			.gpic {
				width: 100%;
				// height: 300rpx;
				border-radius: 12rpx;
			}

			.cpic {
				width: 36rpx;
				position: absolute;
				top: 8rpx;
				right: 12%;
			}
		}

		.gameitem:nth-child(3n+2) {
			padding: 0 1.5%;
			.cpic {
				right: 8%;
			}
		}

		.gameitem:nth-child(3n+3) {
			padding-left: 3%;
			padding-right: 0%;
			.cpic {
				right: 3%;
			}
		}

		.gltxt {
			color: #6C3643;
			text-align: center;
			font-size: 24rpx;
		}
	}
</style>